<template>
  <div>
    <my-treeable listPath="dept/combotree" savePath="dept/save" deletePath="dept/delete" :dialogForm="form" :rules="rules" :tableAttrs="tableattr" dialogTitle="对话框" @show-dialog="sdialog">
      <template v-slot:dialogSlot>
        <el-form-item label="上级部门" prop="parentId">
            <tree-select v-if="showTree" :props="props" :options="option" @getValue="treeval" :valueTitle1="title"></tree-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="name" style="width:100%;" >
            <el-input v-model="form.name"  clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="idx">
          <el-input-number v-model="form.idx1" style="width: 100%;" controls-position="right" @change="handleChange" :min="1"></el-input-number>
        </el-form-item>
      </template>
      <template v-slot:soltTable >
    		    <el-table-column
    		      prop="name"
    		      label="部门">
    		    </el-table-column>
            <el-table-column
              prop="idx"
              label="排序"
              width="200px">
            </el-table-column>
      </template>
    </my-treeable>
  </div>
</template>

<script>
  import myTreeable from '../../components/myTreetable.vue'
  import treeSelect from '../../components/treeSelect.vue'
  export default{
    components:{myTreeable,treeSelect},
    data() {
      return {
            tableattr:{
              'tree-props':{children: 'childrens'},
              'row-key' : "id",
              'default-expand-all':true
            },
            props:{
              value:'id',       // ID字段名
              label: 'name',     // 显示名称
              children: 'childrens'
            },
            rules:{
               name: [{ required: true, message: '请输入部门名称！', trigger: 'blur' }],
               idx:[{readline:true,message:'请输入序号！',trigger:'blur'}],
              },
            form:{
              name:'',
              parentId:'',
              idx1:''
            },
            option:[],
        		  title:'',
        		  showTree:false
      }
    },
    methods:{
      treeval(val){
       this.form.parentId=val;
      },
      sdialog(val){
      	this.option=[];
      	this.title='';
      	this.form.parentId='';
      	this.showTree=false;
      	if(val.id){
      	  this.title=val.pidname;
      	  this.form.parentId=val.pid;
      	  this.opt1(val);
      	}else{

      		this.opt();
      	}
      	this.$nextTick(() => {
      	    this.showTree=true;
      	});

      },
      handleChange(val){
        if(val==undefined){
          this.form.idx1=1;
        }
      },
      opt1(val){
        this.$ajax.post('dept/combotree',{}).then(res=>{
               var result=res.data;
               if(result.success){
      			 this.option=result.data;
      			delTreeNode(this.option,val);
               }
         }).catch(res=>{})
      },
      opt(){
        this.$ajax.post('dept/combotree',{}).then(res=>{
               var result=res.data;
               if(result.success){
      			this.option=result.data;
               }
         }).catch(res=>{})
      }
    }
  }

  function delTreeNode(arr, item) {
    console.log(item.id);
  	 for (let i = 0; i < arr.length; i++) {
  	    if (item.id === arr[i].id) {
  	      arr.splice(i, 1);
          console.log(sss)
  	      return;
  	    }
  	    if (arr[i].childrens && arr[i].childrens.length > 0) {
  	      delTreeNode(arr[i].childrens, item)
  	    }
  	  }

  }
</script>

<style>
</style>
